<template>
	<view class="container">
		<!-- <u-tabbar  :list="tabBarList" :active-color="activeColor" :before-switch="beforeSwitch" :inactive-color="inactiveColor"  :height="84"
			:border-top="borderTop" >
		</u-tabbar> -->
		<view class="home">
			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular indicator-dots autoplay="true" interval="3000">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="item in swipers">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(msg,index) in msgs"
					:key="`mymsg${index}`">
					<view class="uni-media-list">

						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<image class="uni-media-list-logo" :src="msg.msgsender_portrait"></image>
								<text class="uni-title">{{msg.msgcon}}</text>

							</view>
							<text class="uni-media-list-text-bottom">{{msg.t_time}}</text>
							<view class="uni-media-list-text-bottom">
								<text class="uni-media-list-text-bottom">{{msg.msgtime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Socket from '../../store/websocket.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				change: false,
				sure: false,
				msg: [],
				swipers: [
					'/static/index/1.png',
					'/static/index/2.jpg',
					'/static/index/3.jpg',
					'/static/index/4.png'
				],
				msgs: [{
						msgcon: '能源局紧急通报东北区域三起电力安全事故',
						msgsender_portrait: '../../static/index/p1.jpg',
						msgtime: '4.1' //新消息收到的时间
					},
					{
						msgcon: '“杜绝”电力安全事故！电力之“伤”—首先“伤”了电力工人',
						msgsender_portrait: '../../static/index/p2.jpg',
						msgtime: '3.28' //新消息收到的时间
					},
					{
						msgcon: '国家能源局出台30项措施防止电力安全事故！',
						msgsender_portrait: '../../static/index/p3.png',
						msgtime: '3.20' //新消息收到的时间
					}
				]
			}
		},
		computed: {
			...mapState(['isLogin,userInfo,role']),
		},

		watch: {
			sure: {
				handler(newSure, oldSure) {
					if (newSure) {
						console.log(newSure);
						this.$socket.send('{"toUserId":"' + this.msg.fromUserId + '","contentText":"' + 1 + '"}');
					
						uni.showModal({
							title: '消息',
							content: '请求开始票号为' + this.msg.contentText + '的操作票操作',
							success: function(res) {
								if (res.confirm) {
									this.change = true;
									console.log('用户点击确定');
									// uni.request({
									// 	url: this.$api + '/my_tickets/selectContent',
									// 	method: 'POST', // 请求方法
									// 	dataType: 'text',
									// 	data: {
									// 		t_id: this.msg.contentText,
									// 	}, //发送的数据
									// 	header: {
									// 		'Content-Type': 'application/json'
									// 	},
									// 	success: (res) => {
									// 		console.log(res);
									// 		console.log(res.statusCode);
									// 		console.log(res.data);
									// 		console.log(res.data.state);
									// 		var r = JSON.parse(res.data);
									// 		if (r.state == 200) {
									// 			this.$store.state.ticketInfo.data = r.data;
									// 		} else {
									// 			uni.showToast({
									// 				title: r.message,
									// 				icon: 'none'
									// 			})
									// 		}
									// 	}
									// })
									// this.$socket.send('{"toUserId":"' + this.msg.fromUserId + '","contentText":"' + 1 + '"}');
									uni.navigateTo({
										url: '/pages/detail/wacth',
										success() {
											console.log("成功");
										},
										fail() {
											console.log("失败啦")
										}
									})

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				},
				immediate: true
			},
			change: {
				handler(newChange, oldChange) {
					if (newChange) {
						console.log('用户点击确定');
						this.$socket.send('{"toUserId":"' + this.msg.fromUserId + '","contentText":"' + 1 + '"}');
						uni.navigateTo({
							url: '/pages/detail/watch',
							success() {
								console.log("成功");
							},
							fail() {
								console.log("失败啦")
							}
						})
					}
				},
				immediate: true
			}
		},
		onLoad() {

		},
		onShow() {

			console.log('1' + this.$store.state.isLogin);
			console.log('2' + this.$store.state.userInfo.role);
			if (this.$store.state.isLogin && this.$store.state.userInfo.role == 1) {
				console.log('3' + this.$store.state.isLogin);
				uni.setTabBarItem({
					index: 1,
					visible: true
				})
				uni.setTabBarItem({
					index: 2,
					visible: false
				})
				uni.setTabBarItem({
					index: 3,
					visible: false
				})
				uni.setTabBarItem({
					index: 4,
					visible: true
				})

			} else if (this.$store.state.isLogin && this.$store.state.userInfo.role == 2) {
				uni.setTabBarItem({
					index: 1,
					visible: false
				})
				uni.setTabBarItem({
					index: 2,
					visible: true
				})
				uni.setTabBarItem({
					index: 3,
					visible: false
				})
				uni.setTabBarItem({
					index: 4,
					visible: true
				})
			} else {
				uni.setTabBarItem({
					index: 1,
					visible: false
				})
				uni.setTabBarItem({
					index: 2,
					visible: false
				})
				uni.setTabBarItem({
					index: 3,
					visible: true
				})
				uni.setTabBarItem({
					index: 4,
					visible: false
				})
			}
			if (this.$store.state.isLogin && this.$store.state.userInfo.role == 2) {
				//监听websocket
				this.$socket.getMessage(res => {
					console.log('调度侧接收到消息');
					this.$store.state.isWatch = true;
					console.log(res.data);
					this.msg = JSON.parse(res.data);
					console.log(this.msg.contentText);
					this.$store.state.t_id = this.msg.t_id;
					this.sure = true;

				})

				// console.log(sure);

			}

		},
		methods: {
			// ...mapMutations(["setTabarList"]),
			// beforeSwitch(index) {
			// 	if (this.tabarList[index].text == "客服") {
			// 		this.kfshow = true;
			// 		return false;
			// 	} else {
			// 		return true;
			// 	}
			// },
		}
	}
</script>

<!-- 开启scss -->
<style lang="scss">
	.container {
		height: 100vh;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		// flex-direction: column;
		height: calc(100vh - 470rpx);
	}

	.home {
		swiper {
			width: 750rpx;
			height: 470rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 40rpx;
			}
		}
	}

	.button-container {
		display: flex;
		justify-content: center;
	}


	.button {
		background-color: #555;
		color: #fff;
		border: none;
		padding: 10px 20px;
		margin: 0 10px;
		border-radius: 5px;
		font-size: 1.2rem;
		cursor: pointer;
	}

	//
	.uni-padding-wrap {
		margin-top: 80rpx;
	}

	.active {
		font-weight: bolder;
	}

	.scroll-view-item {
		margin: 0 40rpx;
		display: inline-block;
		color: #fff;
		position: relative;
		line-height: 80rpx;
	}

	.scroll-view-item>view {
		height: 4rpx;
		width: 100%;
		position: absolute;
		background: #deccff;
		bottom: 0rpx;
		left: 0;
		border-radius: 2rpx;
	}

	.uni-media-list-logo {
		width: 120upx;
		height: 120upx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 74upx;
		font-size: 23upx;
		overflow: hidden;
	}

	.uni-media-list-text-top>text {
		display: inline-block;
	}

	.uni-media-list-text-top>text:last-child {
		float: right;
		margin-top: 20rpx;
	}

	.uni-media-list-text-bottom {
		display: flex;
		font-size: 20upx;
		flex-direction: row;
		justify-content: space-between;
	}

	.uni-badge {
		width: 30rpx !important;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 15rpx;
		position: relative;
		top: -5px;
		left: 4px;
	}

	.uni-title {
		font-weight: bold;
	}

	.uni-list-cell::after {
		display: none;
	}

	.uni-list-cell {
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.uni-list {
		background: #f8f8f8;
	}
</style>
